<template>
  <div class="features-area section-bg">
    <h1 class="features-area__title">Featured & Recommended</h1>
    <div id="features-area-carousel" class="featureCarousel carousel slide">
      <div class="carousel-inner">
        <div
          :key="index"
          v-for="(carousel, index) in carouselList"
          class="features-area__carousel-item carousel-item"
        >
          <div class="carousel-item-container">
            <img :src="carousel.mainProductImg" class="d-block object-fit-cover left-image" />
            <div class="carousel-item__right">
              <h1>{{ carousel.title }}</h1>
              <div class="right-image-container">
                <img
                  :key="index"
                  v-for="(imgSrc, index) in carousel.rightImageList"
                  :src="imgSrc"
                  class="d-block object-fit-cover right-image"
                />
              </div>
              <div class="carousel-item-container__tag-container tag-container">
                <Tag
                  :key="index"
                  v-for="(item, index) in carousel.tagList"
                  :text="item"
                  :colorIndex="index"
                ></Tag>
              </div>
              <div class="price-container">
                <DiscountTag
                  v-if="carousel.discountText"
                  :text="carousel.discountText"
                ></DiscountTag>
                <div class="d-flex flex-column justify-content-between">
                  <LineThroughPrice
                    class="origin-price"
                    v-if="carousel.originPrice"
                    :text="carousel.originPrice"
                  ></LineThroughPrice>
                  <div class="discount-price">{{ carousel.discountPrice }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template v-if="carouselList.length > 1">
        <button
          v-if="tabIndex !== 0"
          @click="handleTo(tabIndex - 1)"
          class="carousel-control-prev"
          type="button"
          data-bs-target="#featureCarousel"
          data-bs-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button
          v-if="tabIndex !== carouselList.length - 1"
          @click="handleTo(tabIndex + 1)"
          class="carousel-control-next"
          type="button"
          data-bs-target="#featureCarousel"
          data-bs-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </template>
      <Indicator
        class="indicator-container"
        v-if="carouselList.length > 1"
        :indicatorNum="carouselList.length"
        :indicatorIndex="tabIndex"
      ></Indicator>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import Tag from '/src/components/Tag.vue'
import DiscountTag from '/src/components/DiscountTag.vue'
import LineThroughPrice from '/src/components/LineThroughPrice.vue'
import { Carousel } from 'bootstrap'
import Indicator from '/src/components/Indicator.vue'

const carouselList = [
  {
    title: 'Character.AI',
    mainProductImg: '/test/Character/Character.jpg',
    rightImageList: [
      '/test/Character/Character1.png',
      '/test/Character/Character2.png',
      '/test/Character/Character3.png',
      '/test/Character/Character4.png'
    ],
    tagList: ['聊天机器人', '角色创建'],
    discountText: '-20%',
    originPrice: '79 DMD',
    discountPrice: '66 DMD'
  },
  {
    title: 'ChatGPT',
    mainProductImg: '/test/ChatGPT/ChatGPT-product.jpeg',
    rightImageList: [
      '/test/ChatGPT/ChatGPT1.png',
      '/test/ChatGPT/ChatGPT2.png',
      '/test/ChatGPT/ChatGPT3.png',
      '/test/ChatGPT/ChatGPT4.png'
    ],
    tagList: ['对话生成', '文本理解'],
    originPrice: '79 DMD',
    discountPrice: '66 DMD'
  },
  {
    title: 'DALL-E',
    mainProductImg: '/test/DALL-E/DALL-E-product.png',
    rightImageList: [
      '/test/DALL-E/DALL-E1.png',
      '/test/DALL-E/DALL-E2.png',
      '/test/DALL-E/DALL-E3.png',
      '/test/DALL-E/DALL-E4.png'
    ],
    tagList: ['图像生成', 'AI艺术'],
    discountText: '-15%',
    originPrice: '99 DMD',
    discountPrice: '84 DMD'
  },
  {
    title: 'Gemini',
    mainProductImg: '/test/Gemini/Gemini-product.png',
    rightImageList: [
      '/test/Gemini/Gemini1.png',
      '/test/Gemini/Gemini2.png',
      '/test/Gemini/Gemini3.png',
      '/test/Gemini/Gemini4.png'
    ],
    tagList: ['多模态推理', '高级编码'],
    discountText: '-10%',
    originPrice: '89 DMD',
    discountPrice: '80 DMD'
  },
  {
    title: 'Midjourney',
    mainProductImg: '/test/Midjourney/Midjourney-product.png',
    rightImageList: [
      '/test/Midjourney/Midjourney1.png',
      '/test/Midjourney/Midjourney2.png',
      '/test/Midjourney/Midjourney3.png',
      '/test/Midjourney/Midjourney4.png'
    ],
    tagList: ['图像生成', 'AI艺术'],
    discountText: '-12%',
    originPrice: '95 DMD',
    discountPrice: '84 DMD'
  }
]

const tabIndex = ref(0)
const carousel = ref(null)

onMounted(() => {
  carousel.value = new Carousel('#features-area-carousel', {
    touch: false
  })

  document.querySelector('.features-area__carousel-item').classList.add('active')
})

function handleTo(toIndex) {
  toIndex = (toIndex + carouselList.length) % carouselList.length
  tabIndex.value = toIndex
  carousel.value.to(toIndex)
}
</script>

<style scoped>
.features-area__title {
  margin-bottom: 20px;
}
.indicator-container {
  margin-top: 40px;
}
</style>
